<!-- 个人中心 -->
<template>
	<view class="personal-wrap" style="position: relative;">

		<view style="margin-top: 20rpx;">
			<view>
				<view style="display: flex;position: relative;">
					<view class="title">姓名</view>
					<input class="nickname" v-model="nickname" placeholder="输入姓名"></input>
				</view>

			</view>
			<view class="br"></view>
			<view style="margin-top: 20rpx;">
				<view style="display: flex;position: relative;">
					<view class="title">出生日期</view>
					<picker mode="date" @change="bindDateChange">
						<view class="picker">
							<view class="picker">
								<input class="nickname" v-model="timepker" placeholder="请选择出生日期"
									readonly="readonly"></input>
							</view>
						</view>
					</picker>

				</view>
			</view>
			<view class="br"></view>
			<view>
				<view style="display: flex;position: relative;">
					<view class="title">年龄（岁）</view>
					<!-- <view class="name">{{userinfo.nickname}}</view> -->
					<input class="nickname" v-model="age" placeholder="输入年龄" disabled="true"></input>
				</view>

			</view>
			<view class="br"></view>
			<view>
				<view style="display: flex;position: relative;align-items: center;" >
					<view class="title">性别</view>
					<view class="name" style="margin-left: 10rpx;right: 10rpx;">
						<!-- {{gender | sex}} -->
						<u-radio-group v-model="gender">
							<u-radio name="0">男</u-radio>
							<u-radio name="1">女</u-radio>
						</u-radio-group>
					</view>
					<!-- <view class="jiantou">
						<image style="width: 16rpx;height: 28rpx;" src="https://d-duomi.bigchun.com/images/Vector.png">
						</image>
					</view> -->
				</view>

			</view>
			<!-- <view class="br"></view>
			<view style="margin-top: 20rpx;">
				<view style="display: flex;position: relative;">
					<view class="title">支付密码</view>
					<input class="nickname" style="color: #ccc" v-model="password" placeholder="输入支付密码"></input>
				</view>

			</view>
			<view class="br"></view>
			<view style="margin-top: 20rpx;">
				<view style="display: flex;position: relative;">
					<view class="title">确认密码</view>
					<input class="nickname" style="color: #ccc" v-model="determinePassword"
						placeholder="输入确认密码"></input>

				</view>

			</view> -->
			<view class="br"></view>
			<view class="submit" @click="submit">确定</view>
			<u-select v-model="show" :list="sexlist" @confirm='confirm'></u-select>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import {
		BASE_URL
	} from '../../env.js'

	export default {
		filters: {
			sex(val) {
				let data = ['男', '女']
				return data[val]
			}
		},
		data() {
			return {
				nickname: '', //姓名
				gender: '', //性别
				realname: '',
				show: false,
				age: '', // 年龄
				sexlist: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				user: {},
				timepker: '', // 出生日期
				mobile: '',
				avatar: '',
			};
		},
		onLoad() {},
		async onShow() {
			await this.userInfoObject()
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: BASE_URL + '/api/common/upload',
					filePath: path,
					name: 'file',
					complete: (res) => {
						console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data)
						this.avatar = data.data.url
						this.submit()
					}
				});
			})
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			bindDateChange(e) {
				this.timepker = e.detail.value
				this.getAge(this.timepker)
			},
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 用户信息
			userInfoObject() {
				this.getUserInfo(uni.getStorageSync('token')).then(res => {
					this.user = res
					this.nickname = this.user.nickname
					this.gender = this.user.gender
					this.mobile = this.user.mobile
					this.avatar = this.user.avatar
					this.age = this.user.age
					this.timepker = this.user.birthday
				})
			},
			selectSex() {
				this.show = true
			},
			confirm(e) {
				console.log(e);
				this.gender = e[0].value
			},
			handleAuth() {
				uni.navigateTo({
					url: `/pages/index/auth`
				});
			},
			async submit() {
				let data = {
					nickname: this.nickname,
					gender: this.gender,
					mobile: this.mobile,
					avatar: this.avatar,
					payimg: '',
					birthday: this.timepker,
					age: this.age,
				}
				await this.$https('my.profile', data).then(res => {
					uni.showToast({
						title: '保存成功',
						duration: 1000,
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
				this.userInfoObject()
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			getAge(strBirthday) {
				//strBirthday传入格式 2020-04-15
				var returnAge;
				var strBirthdayArr = strBirthday.split('-');
				var birthYear = strBirthdayArr[0];
				var birthMonth = strBirthdayArr[1];
				var birthDay = strBirthdayArr[2];
				//获取当前日期
				var d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1;
				var nowDay = d.getDate();
				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0岁
				} else {
					var ageDiff = nowYear - birthYear; //年之差
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
					}
				}
				if (returnAge > 0) {
					this.age = returnAge
				} else {
					this.age = 0
				}
				return returnAge; //返回周岁年龄

			},
		},
	}
</script>
<style>
	page {
		height: 100%;
		background: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	.personal-wrap {
		padding-bottom: 100rpx;

		.left {
			justify-content: center;
			display: flex;
			color: #fff;
			margin-top: 42rpx;

			.u-avatar-wrap {
				margin-top: 80rpx;
				overflow: hidden;
				// margin-bottom: 80rpx;
				text-align: center;

				.u-avatar-demo {
					width: 150rpx;
					height: 150rpx;
					border-radius: 100rpx;
				}
			}

			.head-img {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 25rpx;
			}
		}

		.xiangji {
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
			position: absolute;
			// margin-left: 176px;
			// margin-top: 31px;
			// margin-top: 96rpx;
			z-index: 999;
		}

		.portrait {
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.br {
			border: 1px solid #F3F3F3;
			margin-left: 24rpx;
			margin-right: 24rpx;
		}

		.title {
			margin-left: 24rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 84rpx;
		}

		.nickname {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #333333;
			line-height: 84rpx;
			position: absolute;
			right: 30rpx;
			text-align: right;
			margin-top: 20rpx;
		}

		.name {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 84rpx;
			position: absolute;
			right: 82rpx;
			text-align: right;
			// margin-top: 20rpx;
		}

		.submit {
			width: 343px;
			height: 49px;
			background: linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
			border-radius: 37rpx;
			opacity: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: white;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			margin-left: -171px;
		}

		.jiantou {
			position: absolute;
			right: 40rpx;
			top: 28rpx;
			//     color:#999999;
			//      line-height: 84rpx;
			//     position: absolute;
			//         right: 24rpx;
		}
	}
</style>
